<template>
	<!--酒店入驻 -->
	<view class="wrap">
		<view class="mar-top-20 input-group bg-ff">	
			<view v-if="addressData.auditStatus == 1" class="text-tr fc-52c">审核通过</view>
			<view v-if="addressData.auditStatus == 2" class="text-tr fc-df5">审核失败</view>
			<view v-if="addressData.auditStatus == 0" class="text-tr fc-f1a">待审核</view>
			<view class="input-row border-bottom-1px">
				<text class="title"><text class="fc-df5">*</text>酒店全称</text>
				<view class="input-row-item">
					<input class="padding-10" placeholder="请输入酒店全称" v-model="addressData.hotelFullName" />
				</view>
			</view>
			<view class="input-row border-bottom-1px">
				<text class="title"><text class="fc-df5">*</text>酒店简称</text>
				<view class="input-row-item">
					<input class="padding-10" placeholder="请输入酒店简称" v-model="addressData.hotelShortName" />
				</view>
			</view>
			<view class="input-row border-bottom-1px">
				<text class="title"><text class="fc-df5">*</text>公司名称</text>
				<view class="input-row-item">
					<input class="padding-10" placeholder="请输入公司名称" v-model="addressData.companyName" />
				</view>
			</view>
			<view class="input-row border-bottom-1px">
				<text class="title"><text class="fc-df5">*</text>酒店邮箱</text>
				<view class="input-row-item">
					<input class="padding-10" placeholder="请输入酒店邮箱" v-model="addressData.hotelEmail" />
				</view>
			</view>	
			<view class="input-row border-bottom-1px">
				<text class="title"><text class="fc-df5">*</text>法人姓名</text>
				<view class="input-row-item">
					<input class="padding-10" placeholder="请输入法人姓名" v-model="addressData.legalPersonName" />
				</view>
			</view>
			<view class="input-row border-bottom-1px">
				<text class="title"><text class="fc-df5">*</text>法人身份证</text>
				<view class="input-row-item">
					<input class="padding-10" placeholder="请输入法人身份证" maxlength="18" v-model="addressData.legalPersonId" />
				</view>
			</view>			
			<view class="input-row border-bottom-1px">
				<text class="title"><text class="fc-df5">*</text>联系人姓名</text>
				<view class="input-row-item">
					<input class="padding-10" placeholder="请输入联系人姓名" v-model="addressData.contactName" />
				</view>
			</view>
			<view class="input-row border-bottom-1px">
				<text class="title"><text class="fc-df5">*</text>手机号</text>
				<view class="input-row-item" v-if="phone == ''">
					<input class="padding-10" maxlength="11" type="number" placeholder="请输入联系人手机号" v-model="addressData.cantactPhone" />
				</view>
				<view class="input-row-item" v-else>
					<input class="padding-10" maxlength="11" type="number" disabled v-model="addressData.cantactPhone"  placeholder="请输入联系人手机号" />
				</view>
			</view>
			<view class="input-row border-bottom-1px" v-if="addressData.auditStatus != 1 && addressData.auditStatus !=0 && addressData.auditStatus!=3">
				<text class="title">验证码</text>
				<view class="input-row-item flex">
					<input class="padding-10 flex-1" maxlength="6" type="number" placeholder="请输入验证码" v-model="addressData.verifyCode " />
					<button class="codebtn" :style="{'background':getCodeBtnColor}"  @click="getCode()">{{getCodeText}}</button>
				</view>
			</view>			
			<view class="input-row border-bottom-1px">
				<text class="title"><text class="fc-df5">*</text>省份名称</text>
				<view class="input-row-item">
					 <pickerAddress class="fc-66" @change="changeAddres">{{addressData.city}}</pickerAddress>
				</view>
			</view>
			<view class="input-row border-bottom-1px">
				<text class="title"><text class="fc-df5">*</text>详细地址</text>
				<view class="input-row-item">
					<input class="padding-10"  placeholder="请填写详细地址" v-model="addressData.address" />
				</view>
			</view>			
			<view class="border-bottom-1px">
				<text class="title fc-33 pad-top-20 dis-block" style="width: 40%;"><text class="fc-df5">*</text>营业执照</text>
				<view class="head-img mar-top-15" @click="uploadImgs(1)">
					<view v-if="addressData.companyLicense==''" class="yyzz fs-60">+</view>
					<image v-else :src="getImgUrl(addressData.companyLicense)" mode="widthFix"></image>
				</view>
			</view>		
			<view class="border-bottom-1px" >
				<text class="title fc-33 pad-top-20 dis-block" style="width: 40%;"><text class="fc-df5">*</text>身份证</text>
				<view class="flex">
					<view class="head-img mar-top-15" @click="uploadImgs(2)">
						<view v-if="addressData.legalPersonIdPositive==''" class="yyzz fs-28">正面</view>
						<image v-else :src="getImgUrl(addressData.legalPersonIdPositive)" mode="widthFix"></image>
					</view>
					<view class="head-img mar-top-15 mar-left-25" @click="uploadImgs(3)">
						<view v-if="addressData.legalPersonIdReverse==''" class="yyzz fs-28">反面</view>
						<image v-else :src="getImgUrl(addressData.legalPersonIdReverse)" mode="widthFix"></image>
					</view>					
				</view>
			</view>
			<view class="input-row border-bottom-1px">
				<text class="title">邀请码</text>
				<view class="input-row-item">
					<input class="padding-10" placeholder="请填写邀请码" v-model="addressData.InvitationCode" />
				</view>
			</view>
			<view class="flex mar-top-30">
				<radio-group @change="radioGroup">
					<radio color="#84C0F4" :value="1" :checked="true" style="transform:scale(0.72);"></radio>
				</radio-group>
				<view class="agreement2">
					已同意并同意《***协议》
				</view>
			</view>
			<view class="btn-row row"><!--  -->
				<button v-if="addressData.auditStatus ==2" type="primary" @click="register(2)" class="btn-save width-90 fc-ff">重新提交</button>
				<view v-else-if="addressData.auditStatus == 0 || addressData.auditStatus == 1 || addressData.auditStatus == 3"></view>
				<button type="primary" v-else class="btn-save width-90" @tap="register(1)">提交审核</button>
			</view>
		</view>
	</view>
</template>

<script>
	import pickerAddress from '@/components/pickerAddress/pickerAddress.vue'; //省市
	import uploadImage from '@/common/ossutil/uploadFile';
	export default {	
		components:{
		    pickerAddress
		},
		data() {			
			return {
				getCodeText: '获取验证码',
				getCodeBtnColor: "#84C0F4",
				getCodeisWaiting: false,
				phone:uni.getStorageSync('phone'),
				addressData: {
					wxuserId:uni.getStorageSync('wxuser_id'),
					contactName:'',//联系人姓名
					companyName:'',//公司名称
					hotelEmail:'',//酒店邮箱
					hotelFullName:'',//酒店全称
					hotelShortName:'',//酒店简单称
					legalPersonName:'',//法人姓名
					legalPersonId:'',//法人身份证
					legalPersonIdPositive:'',//法人身份证正面
					legalPersonIdReverse:'',//法人身份证反面
					cantactPhone:''|| uni.getStorageSync('phone'),//联系人手机号					
					city:'请选择',//城市
					address:'',//地址
					companyLicense:'',//营业执照
					InvitationCode:'',//邀请码
					radioValue: 1,//协议选择
				},
				tmpImageUrl:'',
			}
		},
		mounted() {
			this.listHotel()
		},
		methods:{
			//获取酒店信息
			async listHotel() {
				let param={
					wxuserId:uni.getStorageSync('wxuser_id'),
				}
				let res= await this.$apis.listHotel(param);
				if(res.code == 200){
					if(res.rows.length>0){
						this.addressData = res.rows[0]
						console.log(this.addressData)
					}
					
				}
			},
			//选择省市区
			changeAddres(data) {
				var that = this
				that.addressData.city = data.data.join('')			
			},
			// 营业执照-身份证上传图片
			uploadImgs(type) {
				var that = this
				uni.chooseImage({
					success(res) {
						let tempFilePaths = res.tempFilePaths;
						that.tmpImageUrl = tempFilePaths[0];
						that.uploadFile(type);
					}
				});
			},
			// 上传图片
			uploadFile(type) {
				uni.showLoading({
					title: '图片上传中'
				});
				uploadImage(0, this.tmpImageUrl, 'person/hotelauth/', result => {
					console.log('图片上传结果：', result);
					if(type == 1){
						this.addressData.companyLicense = result
					}else if(type == 2){
						this.addressData.legalPersonIdPositive = result
					}else{
						this.addressData.legalPersonIdReverse = result
					}
					uni.hideLoading();
				});
			},
			//协议同意
			radioGroup(e) {
				this.addressData.radioValue = e.detail.value;
				console.log(this.addressData.radioValue)
			},
			// 点击注册按钮
			async register(type) {
				if(this.addressData.hotelFullName == ''){
					uni.showToast({
						title: '请输入酒店全称',
						icon: 'none'
					});
				}else if(this.addressData.hotelShortName == ''){
					uni.showToast({
						title: '请输入酒店简称',
						icon: 'none'
					});
				}else if(this.addressData.companyName == ''){
					uni.showToast({
						title: '请输入公司名称',
						icon: 'none'
					});
					return false;
				}else if (this.addressData.hotelEmail == '') {
					uni.showToast({
						title: '请输入酒店邮箱',
						icon: 'none'
					});
					return false;
				}else if(this.addressData.legalPersonName ==''){
					uni.showToast({
						title: '不能为空法人姓名',
						icon: 'none'
					});
					return false;
				}else if(this.addressData.legalPersonId ==''){
					uni.showToast({
						title: '不能为空法人身份证号',
						icon: 'none'
					});
					return false;
				}else if(this.addressData.legalPersonIdPositive ==''){
					uni.showToast({
						title: '请上传法人身份证正面',
						icon: 'none'
					});
					return false;
				}else if(this.addressData.legalPersonIdReverse ==''){
					uni.showToast({
						title: '请上传法人身份证反面',
						icon: 'none'
					});
					return false;
				}else if(this.addressData.cantactPhone == ''){
					uni.showToast({
						title: '请输入联系人手机号',
						icon: 'none'
					});
					return false;
				}else if(this.addressData.verifyCode == ''){
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
					return false;
				}else if(this.addressData.city == ''){
					uni.showToast({
						title: '请选择城市',
						icon: 'none'
					});
					return false;
				}else if(this.addressData.address ==''){
					uni.showToast({
						title: '请输入详细地址',
						icon: 'none'
					});
					return false;
				}else if (this.addressData.companyLicense == '') {
					uni.showToast({
						title: '请上传营业执照',
						icon: 'none'
					});
					return false;
				}else{
					if(type == 1){
						let res= await this.$apis.addHotel(this.addressData);
						if(res){
							uni.showToast({title: '提交成功'})
							setTimeout(function(){
								uni.navigateBack({
									delta: 1
								})
							},1200)
						}else{
							uni.showToast({title: '提交失败'})
						}
					}else{
						this.addressData.auditStatus = 0
						let res= await this.$apis.editHotel(this.addressData);
						if(res){
							uni.showToast({title: '提交成功'})
							setTimeout(function(){
								uni.navigateBack({
									delta: 1
								})
							},1200)
						}else{
							uni.showToast({title: '提交失败'})
						}
					}
				}				
			},
			//图片配置域名(oss不需要，直接是返回完整的访问地址)
			getImgUrl(icon){
			   return icon;
			},
			//获取验证码
			getCode() {
				var that = this
				uni.hideKeyboard() //隐藏已经显示的软键盘，如果软键盘没有显示则不做任何操作。
				if (this.getCodeisWaiting) {
					return;
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(that.addressData.cantactPhone))) { //校验手机号码是否有误
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}				
				this.getCodeText = "发送中..." //发送验证码
				this.getCodeisWaiting = true;
				this.getCodeBtnColor = "#ccc" //追加样式，修改颜色
				//示例用定时器模拟请求效果				
				//setTimeout(()用于在指定的毫秒数后调用函数或计算表达式
				setTimeout(() => {
					var res = this.$apis.getVerifyCode(that.addressData.cantactPhone);
					if(res){
						uni.showToast({
							title: '验证码已发送',
							icon: "none"
						}); //弹出提示框				
						this.setTimer(); //调用定时器方法
					}					
				}, 1000)
			},
			setTimer() {
				let holdTime = 60; //定义变量并赋值
				this.getCodeText = "重新获取(60)"
				//setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#84C0F4";
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer); //清除该函数
						return; //返回前面
					}
					this.getCodeText = "重新获取(" + holdTime + ")"
					holdTime--;
				}, 1000)
			},
		}
	}
</script>
<style lang="scss">
	page{
		background: #f6f6f6;
		.input-group{
			border-radius: 8rpx;
			padding: 26rpx 28rpx;
			.t-line{
				border-bottom: 2rpx dashed #f6f6f6;
				padding: 0 0 26rpx;
				height: auto;
			}
			.border-bottom-1px {
				position: relative;		
				&::after {
					position: absolute;
					z-index: 1;
					right: 0;
					bottom: 0;
					left: 20upx;
					height: 1upx;
					content: '';
					-webkit-transform: scaleY(0.5);
					transform: scaleY(0.5);
					background-color: #e2e2e2;
				}
			}
			
			.input-row {
				display: flex;
				flex-direction: row;
				position: relative;
				background: #fff;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;			
				.yzb-next {
					color: $font-color-999;
					text-align: center;
					font-size: 48rpx;
					position: relative;
					top: 13rpx;
				}
				.title {
					width: 30%;
					padding: 20upx 0;
					line-height: 50upx;
					color: #333;
				}
				.pickstyle{
					width: 460rpx;
					input{
						font-size: 28rpx;
						text-align: left;
						height: 60rpx;
					}
				}
				.input-row-item {
					width: 568rpx;
					.remarktextarea{
						height: 205rpx;
						width: 494rpx;
					}
					input {
						text-align: left;
						font-size: 28rpx;
					}
					.codebtn{
						min-width:136rpx;
						padding: 0 20rpx;
						line-height: 65rpx;
						color: #fff;
						font-size: 28rpx;
						text-align: center;
						height:65rpx;
						background: #84C0F4;
						border-radius: 40rpx;
					}
				}
				
			}
		}
		.head-img{
			width:222rpx;
			height:232rpx;
			border-radius:8rpx;
			display: flex;
			align-items: center;
			overflow: hidden;
			border: 1px solid #F8F8F8;
			.yyzz{
				width: 222rpx;
				height: 232rpx;
				display: block;
				background: #F8F8F8;
				border-radius: 8rpx;
				text-align: center;
				line-height: 232rpx;
				margin: 20rpx 0;
				color: #9B9B9B;
			}
			image{
				width:222rpx;
				height:232rpx;
				display: block;
			}
		}
		.agreement2{
			position: relative;
			top: 4px;
		}
		.btn-row {			
			width: 100%;
			box-sizing: border-box;
			.btn-save {
				background-color: #84C0F4;
				height: 90upx;
				line-height: 90upx;
				font-size:34rpx;
			}
			.width-55 {
				width: 55%;
			}
		
			.width-90 {
				width: 90%;
				margin:34rpx auto;
			}
		}
	}
	
</style>
